<!--
 * @Description: mark
 * @Author: wangwangwang
 * @Date: 2020-06-30 09:09:31
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-16 12:00:43
-->
<template>
  <div class="breadcrumb">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index">
        <a v-if="index==breadcrumb.length-1">{{ item }}</a>
        <span v-else class="no-redirect">{{ item }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      breadcrumb: []
    };
  },
  computed: {
    ...mapGetters({
      arr: "getlist",
    }),
  },
  created() {
    this.arr.forEach((res) => {
      let title = [];
      title.push(res.title);
      this.get(res.arr, title, this.$route.name);
    });
  },
  methods: {
    get(arr, title, name) {
      arr.forEach((item) => {
        let a = [];
        a = a.concat(title);
        a.push(item.title);
        item.breadcrumb = a;
        if (item.index == name) {
          this.breadcrumb = item.breadcrumb;
        }
        if (item.arr) {
          this.get(item.arr, item.breadcrumb, name);
        }
      });
    },
  },
};
</script>
<style lang="scss">
.breadcrumb {
  .el-breadcrumb {
    font-size: calc(#{$font_size} + 2px) !important;
  }
  .el-breadcrumb__inner a {
    font-weight: bold !important;
  }
  .el-breadcrumb__inner a:hover {
    color: $bg_color !important;
  }
  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>
